<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>发布供应</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/style_zj.css">
    <link rel="stylesheet" href="../layui/css/layui.css">
    <link rel="stylesheet" href="../fonts/iconfont.css">
    <link rel="stylesheet" href="../css/select2.css">
    <style>
        .select2-container--default .select2-selection--single .select2-selection__arrow{
            height: 38px;
        }
        .select2-container--default .select2-selection--single .select2-selection__rendered{
            line-height: 38px;
        }
        .select2-container .select2-selection--single{
            height: 38px;
            border-color: #D2D2D2!important;
            border-radius: 2px;
        }
        .ff{
            color: red!important;
        }
        .select2-container{
            white-space: pre;
        }
    </style>
</head>
<body>
<!--<div id="header_01_html">
    <iframe id="header_01" src="head_01.html" frameborder="0"></iframe>
</div>-->
<div class="content-box">
    <!--<div id="left_tab_html">
        <iframe id="left_tab" src="left_tab.html?x=1&y=1" frameborder="0"></iframe>
    </div>-->
    <div class="right-box layui-form" id="vue-box" v-cloak>
        <div class="input-title">
            <div class="mr-b"><span class="input-k">您选择的类目：</span><span
                    class="input-v">{{bread}}</span></div>
            <div><span class="input-k">信息类型：</span><span class="input-v">供应</span></div>
        </div>
        <div class="input-box1">
            <div class="li clearfix">
                <div class="left-k"><span class="col-ff4">*</span><span class="text-sty1">产品信息标题</span></div>
                <div class="right-v">
                    <input type="text" class="layui-input js-name" onkeyup='nameVal(this)'>
                    <span class=""></span>
                </div>
            </div>
            <div class="li clearfix">
                <div class="left-k"><span class="col-ff4">*</span><span class="text-sty1">单价</span></div>
                <div class="right-v">
                    <input type="number" placeholder="请输入数字" class="layui-input js-onlyPrice" onkeyup='priceVal(this)'>
                    <span class=""></span>
                </div>
            </div>
            <div class="li clearfix">
                <div class="left-k"><span class="col-ff4"></span><span class="text-sty1">原价</span></div>
                <div class="right-v">
                    <!--onkeyup='originPriceVal(this)'-->
                    <input type="number" placeholder="请输入数字" class="layui-input js-originPrice" >
                    <span class=""></span>
                </div>
            </div>
            <div class="li clearfix">
                <div class="left-k"><span class="col-ff4">*</span><span class="text-sty1">型号</span></div>
                <div class="right-v">
                    <input type="text" class="layui-input js-modal" onkeyup='modalVal(this)'>
                    <span class=""></span>
                </div>
            </div>
            <div class="li clearfix">
                <div class="left-k"><span class="col-ff4"></span><span class="text-sty1">产地</span></div>
                <div class="right-v">
                    <input type="text" class="layui-input js-productionPlace">
                    <span class=""></span>
                </div>
            </div>
            <div class="li clearfix">
                <div class="left-k"><span class="col-ff4">*</span><span class="text-sty1">产品性质</span></div>
                <div class="right-v check-sty11 js-findProperty" style="margin-top: 0px;">
                    <input type="radio" checked name="type" title="全新" lay-skin="primary" value="0">
                    <input type="radio" name="type" title="拆车件" lay-skin="primary" value="1">
                    <input type="radio" name="type" title="再制造" lay-skin="primary" value="2">
                </div>
            </div>
            <div class="li clearfix">
                <div class="left-k"><span class="col-ff4">*</span><span class="text-sty1">所属品牌</span></div>
                <div class="select-sty1 p-r">
                    <div class="box-select2">
                        <select name="" id="brandBox" class="wid220">
                            <option value="">请选择</option>
                        </select>
                    </div>
                    <span class=""></span>
                </div>
            </div>
            <div class="li clearfix">
                <div class="left-k"><span class="col-ff4">*</span><span class="text-sty1">已授权品牌</span></div>
                <div class="right-v" style="width: 165px;"><a href="apply_brand.html" target="_blank"><span class="btn-sty11">立即提交品牌授权</span></a></div>
                <span class="detail-brand-text">提交授权品牌有助于产品排名，以及提高买家对您的信任度</span>
            </div>
        </div>
        <div class="input-box1">
            <div class="li clearfix">
                <div class="left-k"><span class="col-ff4">*</span><span class="text-sty1">产品图片</span></div>
                <div class="detail-pic-text"><span class="js-picStr">您可以根据不同的角度上传多张图片,建议您上传750*750像素以上的实拍大图</span><span style="top: 1px;" class="">不能为空！</span></div>
            </div>
            <div class="li clearfix">
                <div class="left-k"><span class="col-ff4"></span><span class="text-sty1"></span></div>
                <div class="file-img">
                    <div class="box-file">
                        <img src="../img/file1.png" alt="" class="upload_btn">
                    </div>
                </div>
            </div>
            <div class="li clearfix mb-0">
                <div class="left-k"><span class="col-ff4">*</span><span class="text-sty1">详细说明</span></div>
            </div>
            <div class="li clearfix">
                <div class="left-k"><span class="col-ff4"></span><span class="text-sty1"></span></div>
                <div class="right-v wid-820">
                    <!--<textarea name="" required lay-verify="required" placeholder="请输入" class="layui-textarea js-content"></textarea>-->
                    <textarea id="demo" style="display: none;"></textarea>
                    <span class=""></span>
                </div>

            </div>
            <div class="li clearfix">
                <div class="left-k"><span class="col-ff4"></span><span class="text-sty1">选择自定义分类</span></div>
                <div class="select-sty1">
                    <div class="box-select2">
                        <select name="" id="custom" class="wid220">
                            <option value="">请选择</option>
                        </select>
                    </div>
                </div>
            </div>

        </div>


        <div class="input-box1">
            <div class="li clearfix">
                <div class="left-k"><span class="col-ff4">*</span><span class="text-sty1">计量单位</span></div>
                <div class="select-sty1 wid-140">
                    <div class="layui-form">
                        <select name="city" lay-verify="" class="js-prickle">
                            <option value="个">个</option>
                            <option value="台">台</option>
                            <option value="件">件</option>
                            <option value="只">只</option>
                            <option value="套">套</option>
                            <option value="箱">箱</option>
                            <option value="根">根</option>
                            <option value="桶">桶</option>
                            <option value="组">组</option>
                            <option value="其他">其他</option>
                        </select>
                    </div>
                </div>
                <div class="text-info-sty1">关联版式将展示在商品描述的顶部与底部</div>
            </div>
            <div class="li clearfix">
                <div class="left-k"><span class="col-ff4">*</span><span class="text-sty1">成交价格</span></div>
                <div style="position: relative;display: inline-block;">
                    <span class="detail-pic-text js-priceList">在这里可设置该产品的最小起批量，为避免不必要的纠纷，请慎重操作。</span>
                    <span class=""></span>
                </div>
            </div>
            <div class="li clearfix">
                <div class="left-k"><span class="col-ff4"></span><span class="text-sty1"></span></div>
                <div style="padding-right: 20px">
                    <table class="price-table">
                        <thead>
                        <tr>
                            <th style="width: 110px;">操作</th>
                            <th>购买数量</th>
                            <th>产品单价（元）</th>
                            <th>可根据采购的数量设置不同价格</th>
                        </tr>
                        </thead>
                        <tbody class="js-tbody">
                        <tr>
                            <td>
                                <i class="cur-p js-reduce icon_reduce"></i>
                                <i class="fr js-add cur-p icon_add"></i>
                            </td>
                            <td>
                                <input type="number" class="layui-input js-num">
                            </td>
                            <td>
                                <input type="number" class="layui-input js-keyUp">
                            </td>
                            <td>
                                <span class="total-price">0</span>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="text-c">
                <span class="release-btn1 js-submit">提交产品信息</span>
            </div>
        </div>
    </div>
</div>
<!--<div>
    <iframe src="footer-record.html" style="width: 100%;border: none;height:60px;"></iframe>
</div>-->
<script src="../js/config.js"></script>
<script src="../js/select2.full.js"></script>
<script>
    var edit = '';
    var layedit = '';
    //自定义分类
    get_ajax("/sys/customType/getAllList",{storeId:localStorage.getItem('storeId')},function (data) {
        var selectData = [];
        data.forEach(function (item) {
            item.text = item.name;
            selectData.push(item)
            item.subordinate.forEach(function(data){
                data.text = '\t'+data.name
                selectData.push(data)
            })
        })
        console.log(selectData);
        $("#custom").select2({
            data: selectData,
            placeholder: '请选择',
            allowClear: true,
        })
    })


    if(getUrlParam('id')){  //编辑过来的
        get_ajax("/sys/storeCommodity/view", {id:getUrlParam('id')}, function (data) {
            console.log(data);
            $('#demo').val(data.content);
            $('.js-name').val(data.name);
            $('.js-onlyPrice').val(data.price);
            $('.js-originPrice').val(data.originalPrice);
            $('.js-modal').val(data.origin);
            $('.js-productionPlace').val(data.productionPlace);
            $('.js-findProperty').find('input').each(function(){
                if(data.property==$(this).val()){
                    $(this).prop('checked',true)
                }else{
                    $(this).prop('checked',false)
                }
                layui.use(['form'], function () {
                    var form = layui.form;
                    form.render("radio");
                })
            })
            var picArr = data.picUrl.split(',');
            picArr.forEach(function(item){
                var el ='<div class="box-file" data-picUrl="'+item+'">'
                    +'<span class="del-png icon_close"></span>'
                    +'<img src="'+imgBaseUrl+item+'" alt="" class="upload_btn">'
                    +'</div>'
                $('.file-img').append(el);
            })



            $('.js-prickle').find('option').each(function(){
                if(data.prickle == $(this).val()){
                    $(this).prop('selected',true);
                    layui.use(['form'], function () {
                        var form = layui.form;
                        form.render("select");
                        return
                    })
                }
            })

            var priceForBoth = JSON.parse(data.priceForBoth);
            console.log(priceForBoth);
            $('.js-tbody').html('');
            priceForBoth.forEach(function(item){
                var el = '<tr>'
                    +'<td>'
                    +'<i class="cur-p js-reduce icon_reduce"></i>'
                    +'<i class="fr js-add cur-p icon_add"></i>'
                    +'</td>'
                    +'<td>'
                    +'<input type="number" class="layui-input js-num" value="'+item.num+'">'
                    +'</td>'
                    +'<td>'
                    +'<input type="number" class="layui-input js-keyUp" value="'+item.price+'">'
                    +'</td>'
                    +'<td class=""><span class="total-price">'+item.totalPrice+'</span></td>'
                    +'</tr>';
                $('.js-tbody').append(el);
            })
            setTimeout(function(){
                $("#brandBox").val(data.originId).trigger("change");
            },1000)

        })

    }



    var urlString = getUrlParam('bread').replace(/\s+/g,"");




    var postData = {
        name:'',
        productionPlace:'',
        property:'',
        originId:'',   //品牌id
        picUrl:'',
        content:'',
        customType:'',
        prickle:'',
        priceForBoth:'',
        type:'0',
        price:'',
        originalPrice:'',
        origin:'',
        commodityType:urlString.replace(/\>/g,","),
    }
    var app = new Vue({
        el: '#vue-box',
        data: {
            bread:getUrlParam('bread'),
            brandList:'',
        },
        mounted:function(){
            var that = this;
//            get_ajax("/sys/storeCommodityType/getListByPidIsNull", {}, function (data) {
//
//            })
            get_ajax("/sys/origin/getAllNewPage", {}, function (data) {
                that.brandList = data;
                data.forEach(function (item) {
                    item.text = item.name;
                })
                $("#brandBox").select2({
                    data: data,
                    placeholder: '请选择',
                    allowClear: true
                })
            })
        },
        updated:function () {
            layui.use(['form'], function () {
                var form = layui.form;
                form.render("select");
            })
        },
        methods:{
        }
    });



    //图片上传
    layui.use(['upload'], function () {
        var $ = layui.jquery, upload = layui.upload;
        //普通图片上传
        var uploadInst = upload.render({
            elem: '.upload_btn'
            ,multiple:true
            , url: baseUrl + '/file/upload?token=' + Token
            , before: function (obj) {
                loading = layer.load(1, {
                    shade: [0.1, '#fff'] //0.1透明度的白色背景
                });
            }
            , done: function (res, index) {
                //如果上传失败
                if (res.code > 0) {
                    return layer.msg.msg('上传失败');
                } else {
                    var data = res.data;
//                    var str = '<div class="upload_img" picUrl="' + data.address + '" picId="' + data.id + '">' +
//                        '<i class="icon_delete"></i><img src="' + imgBaseUrl + data.address
//                        + '" alt=""></div>'
//                    this.item.parents(".file").after(str);
                    var el ='<div class="box-file" data-picUrl="'+data.address+'">'
                            +'<span class="del-png icon_close"></span>'
                                +'<img src="'+imgBaseUrl+data.address+'" alt="" class="upload_btn">'
                            +'</div>'
                    $('.file-img').append(el);
                    layer.close(loading);
                    console.log('上传成功！')
                }

            }
            , error: function () {

            }
        });
    })

//    del-png
    $(document).on('click','.del-png',function(){
        $(this).parents('.box-file').remove();
    })
    $(document).on('click','.js-add',function(){   //addList
        if($(document).find('.js-add').length<3){
            var el = '<tr>'
                +'<td>'
                +'<i class="cur-p js-reduce icon_reduce"></i>'
                +'<i class="fr js-add cur-p icon_add"></i>'
                +'</td>'
                +'<td>'
                +'<input type="number" class="layui-input js-num">'
                +'</td>'
                +'<td>'
                +'<input type="number" class="layui-input js-keyUp">'
                +'</td>'
                +'<td class=""><span class="total-price">0</span></td>'
            +'</tr>';
            $('.js-tbody').append(el);
        }else{
            layer.msg('最多设置3组价格');
        }
    })
    $(document).on('click','.js-reduce',function(){
        if($(document).find('.js-add').length>1){
            $(this).parents('tr').remove()
        }
    })
    $(document).on('blur','.js-num',function(){//数量change
        if($(this).parents('tr').prev().html()){
            var after = $(this).val();
            var before = $(this).parents('tr').prev().find('.js-num').val();
            if(Number(after) > Number(before)){
                var price = Number($(this).parents('tr').find('.js-keyUp').val());
                var num = Number($(this).val());
                $(this).parents('tr').find('.total-price').html(num*price);
            }else{
                layer.msg('价格区间的数量必须后者大于前者')
                $(this).parents('tr').find('.total-price').html(0);
            }
        }else{

        }
        if($(this).parents('tr').next().html()){
            if($(this).parents('tr').next().find('.js-num').val()){
                var after = $(this).val();
                var before = $(this).parents('tr').next().find('.js-num').val();
                if(Number(after) < Number(before)){
                    var price = Number($(this).parents('tr').find('.js-keyUp').val());
                    var num = Number($(this).val());
                    $(this).parents('tr').find('.total-price').html(num*price);
                }else{
                    layer.msg('价格区间的数量必须前者小于后者')
                    $(this).parents('tr').find('.total-price').html(0);
                }
            }
        }else{
            var price = Number($(this).parents('tr').find('.js-keyUp').val());
            var num = Number($(this).val());
            $(this).parents('tr').find('.total-price').html(num*price);
        }
    })
    $(document).on('blur','.js-keyUp',function(){   //价格change
        if($(this).parents('tr').prev().html()){
            var after = $(this).val();
            var before = $(this).parents('tr').prev().find('.js-keyUp').val();
            if(Number(after)<Number(before)){
                var num = Number($(this).parents('tr').find('.js-num').val());
                var price = Number($(this).val());
                $(this).parents('tr').find('.total-price').html(num*price);
            }else{
                layer.msg('价格区间必须后者小于前者')
                $(this).parents('tr').find('.total-price').html(0);
            }
        }else{
            var num = Number($(this).parents('tr').find('.js-num').val());
            var price = Number($(this).val());
            $(this).parents('tr').find('.total-price').html(num*price);
        }
        if($(this).parents('tr').next().html()){
            if($(this).parents('tr').next().find('.js-keyUp').val()){
                var after = $(this).val();
                var before = $(this).parents('tr').next().find('.js-keyUp').val();
                if(Number(after)>Number(before)){
                    var num = Number($(this).parents('tr').find('.js-num').val());
                    var price = Number($(this).val());
                    $(this).parents('tr').find('.total-price').html(num*price);
                }else{
                    layer.msg('价格区间必须前者大于后者')
                    $(this).parents('tr').find('.total-price').html(0);
                }
            }
        }else{
            var num = Number($(this).parents('tr').find('.js-num').val());
            var price = Number($(this).val());
            $(this).parents('tr').find('.total-price').html(num*price);
        }
    })


    $(document).on('click','.js-submit',function(){//发布
        console.log($("#custom").val());
        postData.customType = $("#custom").val();
        postData.name = $('.js-name').val();
        if(!postData.name){
            $('.js-name').addClass('must-border').siblings('span').addClass('must-val').html('不能为空！');
            return
        }else{$('.js-name').removeClass('must-border').siblings('span').removeClass('must-val').html('');}

        postData.price = $('.js-onlyPrice').val();
        if(!postData.price){
            $('.js-onlyPrice').addClass('must-border').siblings('span').addClass('must-val').html('不能为空！');
            return
        }else{$('.js-onlyPrice').removeClass('must-border').siblings('span').removeClass('must-val').html('');}
        postData.originalPrice = $('.js-originPrice').val();
//        if(!postData.originalPrice){
//            $('.js-originPrice').addClass('must-border').siblings('span').addClass('must-val').html('不能为空！');
//            return
//        }else{$('.js-originPrice').removeClass('must-border').siblings('span').removeClass('must-val').html('');}
        postData.origin = $('.js-modal').val();
        if(!postData.origin){
            $('.js-modal').addClass('must-border').siblings('span').addClass('must-val').html('不能为空！');
            return
        }else{$('.js-modal').removeClass('must-border').siblings('span').removeClass('must-val').html('');}

        postData.originId = $("#brandBox").val();
        if(!postData.originId){
            $('.box-select2').siblings('span').addClass('must-val').html('不能为空！');
            return
        }else{$('.box-select2').siblings('span').removeClass('must-val').html('');}


        var pngStr = '';
        $('.box-file').each(function(index){
            if(index>0){
                pngStr += $(this).attr('data-picurl')+','
            }
        })
        postData.picUrl = pngStr.slice(0,pngStr.length-1);
        if(!postData.picUrl){
            $('.js-picStr').siblings('span').addClass('must-val').html('不能为空！');
            return
        }else{$('.js-picStr').siblings('span').removeClass('must-val').html('');}


        postData.content = layedit.getContent(edit);
        if(!postData.content){
            $('#demo').siblings('span').addClass('must-val').html('不能为空！');
            return
        }else{$('#demo').siblings('span').removeClass('must-val').html('');}

        if($('.price-table').find('tbody tr:first-child .total-price').html()!=0){
            var price = [];
            $('.price-table').find('tbody tr').each(function(){
                var obj = {}
                obj.num = $(this).find('.js-num').val();
                obj.price = $(this).find('.js-keyUp').val();
                obj.totalPrice = $(this).find('.total-price').html();
                price.push(obj);
            })
            postData.priceForBoth = JSON.stringify(price);
            $('.js-priceList').siblings('span').removeClass('must-val').html('');
        }else{
            $('.js-priceList').siblings('span').addClass('must-val').html('不能为空！');
            return
        }

        postData.productionPlace = $('.js-productionPlace').val();
        postData.prickle = $('.js-prickle').val();
        postData.property = $('.js-findProperty').find('input:checked').val();

        console.log(postData)

        if(getUrlParam('id')){
            postData.id = getUrlParam('id');
                get_ajax("/sys/storeCommodity/edit", postData, function (data) {
                console.log(data);
                layer.msg('编辑成功！');
            })
        }else{
            get_ajax("/sys/storeCommodity/add", postData, function (data) {
                console.log(data);
                layer.msg('发布成功！');
            })
        }


    })

    //keyup校验
    function nameVal(e){
        e.value?$('.js-name').removeClass('must-border').siblings('span').removeClass('must-val').html(''):$('.js-name').addClass('must-border').siblings('span').addClass('must-val').html('不能为空！')
    }
    function priceVal(e){
        e.value?$('.js-onlyPrice').removeClass('must-border').siblings('span').removeClass('must-val').html(''):$('.js-onlyPrice').addClass('must-border').siblings('span').addClass('must-val').html('不能为空！')
    }
//    function originPriceVal(e){
//        e.value?$('.js-originPrice').removeClass('must-border').siblings('span').removeClass('must-val').html(''):$('.js-originPrice').addClass('must-border').siblings('span').addClass('must-val').html('不能为空！')
//    }
    function modalVal(e){
        e.value?$('.js-modal').removeClass('must-border').siblings('span').removeClass('must-val').html(''):$('.js-modal').addClass('must-border').siblings('span').addClass('must-val').html('不能为空！')
    }



    setTimeout(function(){
        layui.use('layedit', function(){
            layedit = layui.layedit;
            layedit.build('demo'); //建立编辑器
            layedit.set({
                uploadImage: {
                    url: baseUrl + '/file/layeditUplode?token=' + Token,
                    type: "post"
                }
            });
            edit = layedit.build('demo');
        });
    },100)
</script>
</body>
</html>